<template>
  <div id="app">
    <div class="left_nav fl">
      <div class='pr'>
        <img src="./assets/images/touxiang.png" alt="头像">
        <div class='pa'>
          <p></p>
          <p>隐身</p>
        </div>
      </div>
      <ul>
        <li>
          <router-link to="/dashboard"><i class=' mq-icon-dashboard'></i></router-link>
        </li>
        <li>
          <router-link to="/chat"><i class='mq-icon-chat'></i></router-link>
        </li>
        <li>
          <router-link to="/visitor"><i class='mq-icon-visitor'></i></router-link>
        </li>
        <li>
          <router-link to="/tickets"><i class='mq-icon-ticket'></i></router-link>
        </li>
        <li>
          <router-link to="/history"><i class='mq-icon-history'></i></router-link>
        </li>
        <li>
          <router-link to="/report"><i class='mq-icon-report'></i></router-link>
        </li>
        <li>
          <router-link to="/engage"><i class='mq-icon-CRM'></i></router-link>
        </li>
        
      </ul>

      <ul>
        <li>
          <router-link to="/setting"><i class='el-icon-setting'></i></router-link>
        </li>
        <li>
          <router-link to="/customer"><i class='el-icon-message'></i></router-link>
        </li>
        <li>
         <router-link to="/customer"><i class='el-icon-message'></i></router-link>
        </li>
      </ul>
    </div>
    <div class="right_content">
       <router-view></router-view>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'app'
  }

</script>
<style scoped lang='less'>
  #app {
    
    .left_nav {
      padding: 30px 10px 0 10px;
      height: 790px;
      width: 70px;
      background: #343f4b;
      div {
        img {
          width: 50px;
          border-radius: 50%;
        }
        div {
          left:15px;
          bottom:-35px;
            p:first-of-type {
              background: #ff5c5e;
              width: 10px;
              height: 10px;
              border-radius: 50%;
            }
        }
      }
      ul {  
        margin-top: 100px;
        text-align: center;
          li{
            width: 50px;
            height: 50px;
            line-height: 20px;
            a i{
              color:#748392;
              font-size: 20px;
              
            }
            a:hover i{
              color:#fff;
            }
          }
      }
     
    }
    .right_content{
     
      overflow: hidden;
    }
  }

</style>
